<template>
    <view class="change-pwd-container">
        <u-form :model="formData" ref="uForm">
            <u-form-item label="旧密码" prop="oldpwd" label-width="140">
                <u-input v-model="formData.oldpwd" type="password" placeholder="输入账号的原登录密码" @blur="checkOldpwd" />
            </u-form-item>
            <u-form-item label="新密码" prop="newpwd" label-width="140">
                <u-input v-model="formData.newpwd" type="password" placeholder="输入新的密码" @blur="checkNewpwd" />
            </u-form-item>
            <u-form-item label="确认密码" prop="confirmpwd" label-width="140">
                <u-input v-model="formData.confirmpwd" type="password" placeholder="请确认新的密码" @blur="checkConfirmpwd" />
            </u-form-item>
        </u-form>
        <view class="submit-btn">
            <u-button type="primary" @click="handleSubmit">修改密码</u-button>
        </view>
    </view>
</template>

<script>
import { md5 } from '@/utils/md5.js'

export default {
    data() {
        return {
            formData: {
                oldpwd: '',
                newpwd: '',
                confirmpwd: ''
            },
            rules: {
                oldpwd: [{
                    required: true,
                    message: '老哥，这里还没填呢',
                    trigger: ['blur', 'change']
                }],
                newpwd: [{
                    required: true,
                    message: '密码不能为空哟',
                    trigger: ['blur', 'change']
                }, {
                    min: 6,
                    max: 18,
                    message: '密码必须大于或等于6个字符且小于或等于18个字符哟',
                    trigger: ['blur', 'change']
                }, {
                    pattern: /^\w{5,40}$/,
                    message: '密码不能包含英文、数字和下划线之外的字符哟',
                    trigger: ['blur', 'change']
                }],
                confirmpwd: [{
                    required: true,
                    message: '小伙子心急了呀，这里还没有填呢',
                    trigger: ['blur', 'change']
                }]
            }
        }
    },
    methods: {
        checkOldpwd() {
            if (!this.formData.oldpwd) {
                uni.showToast({
                    title: '老哥，这里还没填呢',
                    icon: 'none'
                })
                return false
            }
            return true
        },
        checkNewpwd() {
            if (!this.formData.newpwd) {
                uni.showToast({
                    title: '密码不能为空哟',
                    icon: 'none'
                })
                return false
            }
            if (this.formData.newpwd.length < 6 || this.formData.newpwd.length > 18) {
                uni.showToast({
                    title: '密码必须大于或等于6个字符且小于或等于18个字符哟',
                    icon: 'none'
                })
                return false
            }
            const passwordReg = /^\w{5,40}$/
            if (!passwordReg.test(this.formData.newpwd)) {
                uni.showToast({
                    title: '密码不能包含英文、数字和下划线之外的字符哟',
                    icon: 'none'
                })
                return false
            }
            return true
        },
        checkConfirmpwd() {
            if (!this.checkNewpwd()) {
                uni.showToast({
                    title: '小伙子心急了呀，前面的还没有填呢',
                    icon: 'none'
                })
                return false
            }
            if (!this.formData.confirmpwd) {
                uni.showToast({
                    title: '小伙子心急了呀，这里还没有填呢',
                    icon: 'none'
                })
                return false
            }
            if (this.formData.confirmpwd !== this.formData.newpwd) {
                uni.showToast({
                    title: '哎呀，看起来和前面不一样呢',
                    icon: 'none'
                })
                return false
            }
            return true
        },
        async handleSubmit() {
            this.$refs.uForm.validate(valid => {
                if (valid) {
                    if (this.checkOldpwd() && this.checkNewpwd() && this.checkConfirmpwd()) {
                        this.updatePwd()
                    }
                }
            })
        },
        updatePwd() {
            const user = uni.getStorageSync('user')
            uni.request({
                url: '/api/my/user/updatePwd',
                method: 'PUT',
                data: {
                    oldpwd: md5(this.formData.oldpwd),
                    newpwd: md5(this.formData.newpwd),
                    user: user
                },
                success: (res) => {
                    console.log(res.data);
                    if (Object.keys(res.data).length > 0) {
                        uni.showToast({
                            title: '密码修改成功！', 
                            icon: 'success'
                        })
                        uni.setStorageSync('user', res.data)
                        this.formData.oldpwd = ''
                        this.formData.newpwd = ''
                        this.formData.confirmpwd = ''
                    } else {
                        uni.showToast({
                            title: '很明显，宁这密码不对嘛',
                            icon: 'none'
                        })
                    }
                },
                fail: () => {
                    uni.showToast({
                        title: '修改密码失败，请稍后重试',
                        icon: 'none'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.change-pwd-container {
    padding: 30rpx;
    background-color: #ffffff;
    min-height: 100vh;

    .form-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 40rpx;
        text-align: center;
    }

    .submit-btn {
        margin-top: 60rpx;
        padding: 0 30rpx;
    }

    :deep(.u-form-item) {
        margin-bottom: 30rpx;

        .u-form-item__body {
            padding: 20rpx 0;
        }

        .u-form-item__body__left {
            font-size: 28rpx;
            color: #333;
            white-space: nowrap;
        }

        .u-input {
            background-color: #f8f8f8;
            border-radius: 8rpx;
            padding: 20rpx;
        }
    }
}
</style>